import React, { Component } from 'react'
import '../css/redio.scss'
export default class Checkbox extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: [],
    }
  }
  componentDidMount() {
    let newarr = this.props.data.map((item) => {
      return {
        name: item,
        checked: false
      }
    })
    this.setState({
      data: newarr
    })
  }

  checked = (item) => {
    const { data } = this.state
    data[item].checked = !data[item].checked
    this.setState({
      data
    })
    let likes =  data.filter((e)=>{
        return e.checked
    }).map((i)=>{
      return i.name
    })
    this.props.CheckedItem(likes)
  }
  render() {
    return (

      <div className='redio'>
        {
          this.state.data.map((item, index) => {
            return (

              <div key={index} className={item.checked ? 'item2' : 'item'} onClick={this.checked.bind(this, index)}>{item.name}</div>
            )
          })
        }

      </div>

    )
  }
}
